<template>
  <div class="g-bd">
    <div class="category">
      <div class="raditype">
        <ul v-if="radioCateList" :class="radioListShowIndex == 1 ? 'z-show' : ''" data-index="1">
          <li v-for="item in 18" :key="item * 300">
            <router-link
              :to="'/discover/djradio/category?cateId=' + radioCateList[item - 1].id"
              class="radiotype-link"
              :class="radioCateList[item - 1].id == currentCate ? 'current' : ''"
              ref="radTypeLinkRef"
              ><div
                class="icon"
                :style="{ backgroundImage: 'url(' + radioCateList[item - 1].picWebUrl + ')' }"
              ></div>
              <span>{{ radioCateList[item - 1].name }}</span></router-link
            >
          </li>
        </ul>
        <ul v-if="radioCateList" :class="radioListShowIndex == 2 ? 'z-show' : ''" data-index="2">
          <li v-for="item in radioCateList.length - 18" :key="item * 301">
            <router-link
              :to="'/discover/djradio/category?cateId=' + radioCateList[item - 1 + 18].id"
              class="radiotype-link"
              ref="radTypeLinkRef"
              :class="radioCateList[item - 1 + 18].id == currentCate ? 'current' : ''"
              ><div
                class="icon"
                :style="{ backgroundImage: 'url(' + radioCateList[item - 1 + 18].picWebUrl + ')' }"
              ></div>
              <span>{{ radioCateList[item - 1 + 18].name }}</span></router-link
            >
          </li>
          <li class="question">
            <a
              href="https://music.163.com/#/topic?id=18652232"
              target="_blank"
              class="radiotype-link"
            >
              <div class="icon"></div>
              <span>常见问题</span>
            </a>
          </li>
          <li class="apply">
            <a href="" class="radiotype-link">
              <div class="icon"></div>
              <span>我要做主播</span>
            </a>
          </li>
        </ul>
        <span class="prev" @click="changeRadioList(1)"></span>
        <span class="next" @click="changeRadioList(2)"></span>
        <!-- 轮播图控制点 -->
        <div class="dots" ref="dotsRef">
          <a
            href="javascript:;"
            class="dot"
            :class="radioListShowIndex == item2 ? 'current' : ''"
            @click="changeRadioList(item2)"
            v-for="item2 in 2"
            :key="item2 * 31"
          ></a>
        </div>
      </div>
      <div class="new" v-if="newRadioList">
        <div class="u-title">
          <h3><span>优秀新电台</span></h3>
        </div>
        <ul>
          <li
            class="f-fl"
            v-for="index in newRadioList.length > 5 ? 5 : newRadioList.length"
            :key="index * 310"
          >
            <router-link
              :to="`/djradio?id=${newRadioList[index - 1].id}`"
              class="a-imgwrap"
              :title="newRadioList[index - 1].name"
              ><img :src="newRadioList[index - 1].picUrl + '?param=200y200'" alt=""
            /></router-link>
            <!-- <a href="" class="a-imgwrap"
            ><img :src="newRadioList[index - 1].picUrl + '?param=200y200'" alt=""
          /></a> -->
            <h3>
              <router-link :to="`/djradio?id=${newRadioList[index - 1].id}`">{{
                newRadioList[index - 1].name
              }}</router-link>
              <!-- <a href=""></a> -->
            </h3>
            <p>{{ newRadioList[index - 1].rcmdtext }}</p>
          </li>
        </ul>
      </div>
      <div class="radimore">
        <div class="u-title">
          <h3><span>电台排行榜</span></h3>
          <!-- <div class="tab f-fr">
          <a href="" class="select">上升最快</a><span class="line">|</span><a href="">最热电台</a>
        </div> -->
        </div>
        <ul class="radlist">
          <li class="f-fl" v-for="hotradio in hotRadioList" :key="hotradio.id">
            <router-link
              :to="`/djradio?id=${hotradio.id}`"
              class="a-imgwrap f-fl"
              :title="hotradio.name"
              ><img :src="hotradio.picUrl + '?param=200y200'" alt=""
            /></router-link>
            <!-- <a href="" class="a-imgwrap f-fl"
            ><img :src="hotradio.picUrl + '?param=200y200'" alt=""
          /></a> -->
            <div class="cnt-wrap f-fl">
              <h3>
                <router-link :to="`/djradio?id=${hotradio.id}`" :title="hotradio.name">{{
                  hotradio.name
                }}</router-link>
                <!-- <a href="" :title="hotradio.name">{{ hotradio.name }}</a> -->
              </h3>
              <p class="note">
                <i class="u-icn"></i>
                <router-link
                  :to="`/user/home?id=${hotradio.dj.userId}`"
                  :title="hotradio.dj.nickname"
                  >{{ hotradio.dj.nickname }}</router-link
                >
                <!-- <a href="" :title="hotradio.dj.nickname">{{ hotradio.dj.nickname }}</a> -->
              </p>
              <p>
                共{{ hotradio.programCount }}期&nbsp;&nbsp;&nbsp;&nbsp;订阅{{ hotradio.subCount }}次
              </p>
            </div>
          </li>
        </ul>
      </div>
      <!-- 分页 -->
      <PageNav
        :total="total"
        :pageSize="35"
        :currentPage="currentPage"
        @currentChange="handleCurrentChange"
        v-if="hotRadioList && total"
      ></PageNav>
    </div>
  </div>
</template>

<script>
import PageNav from '@/components/PageNav/PageNav.vue'
import {catelist,programRecom,programTop,radioMore} from '@/api/radio.js'
export default {
  components: { PageNav },
  data() {
    return {
      // 当前分类
      currentCate: 0,
      // 电台分类
      radioCateList: null,
      // 控制电台分类列表展示
      radioListShowIndex: 1,
      // 新电台数据
      newRadioList: null,
      // 电台热门榜单
      hotRadioList: null,
      total: 0,
      // 当前页码
      currentPage: 1,
      // 路由参数
      params: { limit: 30, offset: 0, cateId: 2 }
    }
  },
  methods: {
    // 获取电台分类列表
    async getradioCateList() {
      const { data } = await catelist()
      this.radioCateList = data.categories
    },
    // 切换电台列表
    changeRadioList(index) {
      this.radioListShowIndex = index
    },
    // 点击电台分类后切换当前分类样式
    radTypeLinkClick(e) {
      this.$refs.radTypeLinkRef.forEach(item => {
        item.classList.remove('current')
      })
      e.currentTarget.classList.add('current')
      // console.log(this.$refs.radTypeLinkRef)
    },
    // 获取推荐新电台数据
    async getNewRadio() {
      // console.log(this.$route.query)
      const url = '/dj/recommend/type?type=' + this.$route.query.cateId
      // console.log(url)
      const { data } = await radioMore(this.$route.query.cateId)
      // const { data } = await this.$http.get(url)
      // console.log(data)
      this.newRadioList = data.djRadios
      //   this.radioMoreId.forEach(async id => {
      //     const url = '/dj/recommend/type?type=' + id
      //     // console.log(url)
      //     const { data } = await this.$http.get(url)
      //     // console.log(data)
      //     this.radioMoreList.push(data.djRadios)
      //   })
    },
    async getHotRadioList() {
      // 将路由参数合并
      const newParams = Object.assign(this.params, this.$route.query)
      // 当前页码
      this.currentPage = newParams.offset / 30 + 1
      // 发起请求
      const { data } = await this.$http.get('/dj/radio/hot', { params: newParams })
      // 赋值
      // console.log(this.$route.query)
      // const url = '/dj/radio/hot?limit=30&offset=0&cateId=' + this.$route.query.id
      // console.log(url)
      // const { data } = await this.$http.get(url)
      console.log(data)
      this.hotRadioList = data.djRadios
      this.total = data.count
    },
    // 分页按钮改变，重新获取数据
    handleCurrentChange(val) {
      // 更新offset
      this.params.offset = (val - 1) * this.params.limit
      // 将parmas拼接
      const temparr = []
      for (const key in this.params) {
        temparr.push(key + '=' + this.params[key])
      }
      const query = '?' + temparr.join('&')
      // 路由跳转
      this.$router.push('/discover/djradio/category?' + query)
      // 重新获取数据
      this.getHotRadioList()
    }
    // /dj/radio/hot?cateId=3
  },
  watch: {
    $route(to, from) {
      // 获取推荐新电台数据
      this.getNewRadio()
      this.getHotRadioList()
      this.currentCate = this.$route.query.cateId
      // 当当前路由参数变化重置当前页码
      if (from.query.cateId !== to.query.cateId) {
        this.currentPage = 1
      }
      // window.sessionStorage.setItem('currentRadioCate', this.$route.query.cateId)
    }
  },
  created() {
    this.currentCate = this.$route.query.cateId
    // 获取电台分类列表
    this.getradioCateList()
    // 获取推荐新电台数据
    this.getNewRadio()
    this.getHotRadioList()
  },
  updated() {
    // console.log(this.$route.query)
    // console.log(this.$refs.radTypeLinkRef)
  },
  mounted() {
    // console.log(this.$route.query)
    // setTimeout(() => {
    //   console.log(this.$refs.radTypeLinkRef)
    //   this.$refs.radTypeLinkRef.forEach(item => {
    //     console.log(item.dataSet)
    //   })
    // }, 200)
    // this.$refs.radTypeLinkRef.forEach(item => {
    //   console.log(item)
    // })
  }
}
</script>

<style lang="less" scoped>
@import url(./RadioCate.less);
</style>
